// 新建报表
import React from 'react';
import { Select, Tree } from 'antd';
import { getAllColumns, getAllTable } from 'src/services/AnalyseManage';
// import DragItem from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/Drag/DragItem';
// import { DndProvider } from 'react-dnd';
// import { HTML5Backend } from 'react-dnd-html5-backend';
const { Option } = Select;

interface IProps {
	// handlePush: any
}

class ModelDataTree extends React.Component<IProps> {
	// const [ expandedKeys ] = useState( [ '0-0', '0-0-0', '0-0-0-0' ] );
	// const { onChange } = this.props;
	// setExpandedKeys

	state: any = {
		tables: [],
		tree: [],
	};

	componentDidMount() {
		this.initData();
	}

	onChange( tree ) {
		console.log( tree );
	}

	initData = async () => {
		let pageResponse = await getAllTable( { roleSign: '' } );
		if ( pageResponse.data && pageResponse.data.success ) {
			let tables = pageResponse.data.data;
			this.setState( { tables: tables } );
			if ( tables.length > 0 ) {
				let tableName = tables[0];
				this.initColumn( tableName );
			}
		}
	};

	initColumn = async ( tableName: string ) => {
		let response = await getAllColumns( { tableName: tableName } );
		if ( response.data && response.data.success ) {
			if ( response.data && response.data.success ) {
				let dates = response.data.data;
				let treeData = [];
				dates.forEach( ( item: any ) => {
					let child = this.buildChild( item );
					treeData.push( child );
				} );
				console.log( treeData );
				this.setState( { tree: treeData } );
			}
		}
	};

	buildChild = ( item: any ) => {
		let childs = [];
		item.children.forEach( ( childrenItem: any ) => {
			let child = this.buildChild( childrenItem );
			childs.push( child );
		} );
		return {
			...item,
			key: item.id,
			title: item.desc ? item.desc : item.name,
			children: childs,
			// icon: <CarryOutOutlined />,
		};
	};

	onDragEnter = ( info ) => {
		console.log( info );
		// expandedKeys 需要受控时设置
		// this.setState({
		//   expandedKeys: info.expandedKeys,
		// });
	};

	onDrop = ( info ) => {
		console.log( info );
		const dropKey = info.node.props.eventKey;
		const dragKey = info.dragNode.props.eventKey;
		const dropPos = info.node.props.pos.split( '-' );
		const dropPosition = info.dropPosition - Number( dropPos[dropPos.length - 1] );

		const loop = ( data, key, callback ) => {
			for ( let i = 0; i < data.length; i++ ) {
				if ( data[i].key === key ) {
					return callback( data[i], i, data );
				}
				if ( data[i].children ) {
					loop( data[i].children, key, callback );
				}
			}
		};
		const data = [ ...this.state.tree ];

		// Find dragObject
		let dragObj;
		loop( data, dragKey, ( item, index, arr ) => {
			arr.splice( index, 1 );
			dragObj = item;
		} );

		if ( !info.dropToGap ) {
			// Drop on the content
			loop( data, dropKey, ( item ) => {
				item.children = item.children || [];
				// where to insert 示例添加到尾部，可以是随意位置
				item.children.push( dragObj );
			} );
		} else if (
			( info.node.props.children || [] ).length > 0 && // Has children
			info.node.props.expanded && // Is expanded
			dropPosition === 1 // On the bottom gap
		) {
			loop( data, dropKey, ( item ) => {
				item.children = item.children || [];
				// where to insert 示例添加到头部，可以是随意位置
				item.children.unshift( dragObj );
			} );
		} else {
			let ar;
			let i;
			loop( data, dropKey, ( item, index, arr ) => {
				ar = arr;
				i = index;
			} );
			if ( dropPosition === -1 ) {
				ar.splice( i, 0, dragObj );
			} else {
				ar.splice( i + 1, 0, dragObj );
			}
		}
		this.setState( { tree: data } );
		// if ( onChange ) {
		// 	onChange( data );
		// }
	};
	handleChange( value ) {
		this.initColumn( value );
	}
	render() {
		let tables = this.state.tables;
		let defaultValue = tables && tables.length > 0 ? tables[0] : null;
		const children = [];
		tables.forEach( ( value, key ) => {
			children.push(
				<Option value={value} key={value}>
					{value}
				</Option>
			);
		} );

		// const { handlePush } = this.props;
		return (
			<div>
				<Select onChange={this.handleChange} value={defaultValue}>
					{children}
				</Select>

				<Tree
					className="draggable-tree"
					// defaultExpandedKeys={expandedKeys}
					draggable
					blockNode
					onDragEnter={this.onDragEnter}
					onDrop={this.onDrop}
					treeData={this.state.tree}
					// titleRender={( v ) => (
					// 	<DragItem
					// 		key={v.key}
					// 		name={v.title}
					// 		id={v.key}
					// 		from={this.state.tree}
					// 		handlePush={( item ) => handlePush( item )}
					// 	></DragItem>
					// )}
				></Tree>
			</div>
		);
	}
}

export default ModelDataTree;
